<template>
	<view>
		<view>
			<table-title content="紧急联系号码"></table-title>
			<view>
				<small-title content="紧急联系人"></small-title>
				<view class="item-table" v-for="(item,index) in relationList" :key="index">
					<image src="../../static/delete-logo.svg" class="wrong-logo" @click="deleteRelation(index)"></image>
					<view-item name="姓名" :value="item.name"></view-item>
					<view-item name="手机号码" :value="item.phone"></view-item>
					<view-item name="联络地址" :value="item.address"></view-item>
					<view-item name="邮政编码" :value="item.zipcode" :isLast="true"></view-item>
				</view>
			</view>
			<view>
				<view class="item-table" v-for="(n,index) in addList.length" :key="'add'+index">
					<image src="../../static/delete-logo.svg" class="wrong-logo" @click="deleteAdd(index)"></image>
					<input-item typeMsg="姓名"></input-item>
					<input-item typeMsg="手机号码"></input-item>
					<input-item typeMsg="联络地址"></input-item>
					<input-item typeMsg="邮政编码" :isLast="true"></input-item>
				</view>
			</view>
			<button class="add-button" @click="addNumber">+</button>
			<view class="mix-button">
				<view class="left-part">
					<button class="left-button">修改</button>
				</view>
				<view class="right-part">
					<button class="right-button">返回</button>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
		</view>
		<u-tabbar v-model="current" :list="list" :before-switch="clickTabbar"></u-tabbar>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				relationList:[
					{'name':'李大伟1','phone':'18705015193','address':'福建海峡科技有限公司','zipcode':'350000',
						'Email':'2729244323@qq.com'},
					{'name':'李小伟2','phone':'18705015193','address':'福建海峡科技有限公司','zipcode':'350000',
						'Email':'2729244323@qq.com'},
					{'name':'李小伟3','phone':'18705015193','address':'福建海峡科技有限公司','zipcode':'350000',
						'Email':'2729244323@qq.com'},
					{'name':'李小伟4','phone':'18705015193','address':'福建海峡科技有限公司','zipcode':'350000',
						'Email':'2729244323@qq.com'}	
				],
				number:0,
				addList:[],
				list: [
					{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '管家',
						customIcon: false,
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '发现',
						customIcon: false,
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '消息',
						count: 23,
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
					},
				],
				current: 0
			}
		},
		methods: {
			addNumber() {
				let newTmp = [{}]
				let addListTmp = [...this.addList]
				addListTmp = [...newTmp,...addListTmp]
				this.addList = addListTmp
			},
			deleteRelation(n){
				this.relationList.splice(n,1)
			},
			deleteAdd(n){
				this.addList.splice(n,1)
				this.number--
			},
			clickTabbar(index) {
				switch(index){
					case 0:
						console.log('首页')
						uni.redirectTo({
							url:'/pages/home/home'
						})
						return true
						break
					case 1:
						console.log('管家')
						return true
						break
					case 2:
						console.log('发现')
						return true
						break
					case 3:
						console.log('消息')
						uni.redirectTo({
							url:'/pages/systemAnnoucement/list/list'
						})
						return true
						break
					case 4:
						console.log('我的')
						uni.navigateTo({
							url:'/pages/myPage/myPage'
						})
						return true
						break
				}
			}
		},
	}
</script>

<style>
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}
	.wrong-logo{
		width: 40rpx;
		height: 40rpx;
		margin-bottom: -40rpx;
		margin-left: 612rpx;
		z-index: 999;
		background-color: #555555
	}	
	.add-button{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-weight: 1000;
		font-size: 50rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: #F1F1F1;
	}
	.add-button::after{
		border: none;
	}
	.mix-button{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.left-part{
		float: right;
	}
	.right-part{
		float: left;
	}
	.left-button{
		background-color: #FF0000;
		border-radius: 50rpx 0 0 50rpx;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.right-button{
		background-color: #0000FF;
		border-radius: 0 50rpx 50rpx 0;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
</style>
